<template>
  <div style="padding: 20px; background-color: #F5F5F5; min-height: calc(100vh - 60px);">
    <!-- 欢迎卡片 -->
    <el-card shadow="hover" style="margin-bottom: 20px;">
      <div style="font-size: 24px; font-weight: bold;">欢迎回来，{{ user.username }}！</div>
      <div style="margin-top: 10px; font-size: 16px; color: #666;">您已登录为：管理员</div>
    </el-card>

    <!-- 员工信息卡片 -->
    <el-card shadow="hover" style="width: 300px; float: left; margin-right: 20px;">
      <template #header>
        <div style="font-size: 18px; font-weight: bold;">个人信息</div>
      </template>
      <div style="display: flex; align-items: center;">
        <el-avatar :size="60" style="margin-right: 15px;">
          <img :src="user.avatar || '/default-avatar.png'" />
        </el-avatar>
        <div>
          <p><strong>姓名：</strong>{{ user.username }}</p>
          <p><strong>身份：</strong>管理员</p>
        </div>
      </div>
    </el-card>

    <!-- 快捷操作入口 -->
    <el-card shadow="hover" style="flex: 1;">
      <template #header>
        <div style="font-size: 18px; font-weight: bold;">快捷操作</div>
      </template>
      <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
        <el-button type="primary" plain @click="goTo('/admin/a_user')" size="large" style="margin: 18px 0;">会员管理</el-button>
        <el-button type="default" plain @click="goTo('/admin/a_pay')" size="large" style="margin: 18px 0;">订单管理</el-button>
        <el-button type="success" plain @click="goTo('/admin/a_employee')" size="large" style="margin: 18px 0;">员工列表</el-button>
        <el-button type="info" plain @click="goTo('/admin/a_courses')" size="large" style="margin: 18px 0;">课程管理</el-button>
        <el-button type="warning" plain @click="goTo('/admin/a_equipment')" size="large" style="margin: 18px 0;">器材管理</el-button>
        <el-button type="danger" plain @click="goTo('/admin/a_repair')" size="large" style="margin: 18px 0;">维修记录</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { User } from '@element-plus/icons-vue'

const user = ref({
  username: '张伟',
  avatar: 'https://img0.baidu.com/it/u=3785348319,2786421711&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=657'
})
const router = useRouter()

// 跳转函数
const goTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
.el-card__body {
  padding: 20px;
}
</style>
